<template>
    <div class="film" v-if="film" v-cloak>
        <van-sticky>
        <myHead :title="film.name" :show='true'></myHead>
        </van-sticky>
        <div class="film-main">
            <div class="myimg">
                <img :src="film.poster" alt="">
            </div>
        </div>




        <div class="film-detail">
                <div class="col">
                <div class="film-name">
                    <span class="name">{{ film.name }}</span>
                    <span class="item">{{ film.item.name }}</span>
                </div>
                <div class="film-grade">
                    <span class="grade">{{ film.grade }}</span>
                    <span class="grade-text">分</span>
                </div>
                </div>
                <div class="film-category">
                {{ film.category }}
                </div>
                <div class="film-premiere-time">
                {{ film.premiereAt | dateFormat('YYYY-MM-DD') }} 上映 
                </div>
                <div class="film-nation-runtime">
                {{ film.nation }} | {{ film.runtime }}分钟
                </div>
                <div class="film-synopsis" ref="synopsis">
                {{ film.synopsis }}
                </div>
                <div class="toggle" @click="changeHeight">
                    <van-icon v-if="!show" name="arrow-down" size="16" />
                    <van-icon v-else name="arrow-up" size="16" />
                </div>
            </div>

            <div class="actor">
                <div class="actor-title">演职人员</div>
                <div class="actor-list">
                    <ul >
                        <li v-for="(act,i) in film.actors" :key="i">
                            <div class="actor-img">
                                <img :src="act.avatarAddress" alt="">
                            </div>
                            <p class="actor-name">{{act.name}}</p>
                            <p class="actor-role">{{act.role}}</p>
                        </li>
                    </ul>
                </div>
            </div>
            <div class="photo">
                <div class="photo-top">
                    <p class="left">剧照</p>
                    <p class="right">全部({{film.photos.length}})</p>
                </div>
                <div class="photo-img-box">
                    <div class="photo-imgs">
                    <img :src="l" @click="seeBigImg(l,i)" :key="i" v-for="(l,i) in film.photos" alt="">
                </div>
                </div>
            </div>




        <footer>
            <div class="buyticket" @click="gotpbuy">
                选座购票
            </div>
        </footer>
    </div>
    
</template>
<script>
import {ImagePreview} from 'vant'
export default {
    data(){
        return{
            film:null,
            show:false
        }
    },
    mounted(){
        this.$ajax.getmaizuodata({
                filmId:this.$route.params.filmId
        },{
            'X-Host': 'mall.film-ticket.film.info'
        })
        .then(res=>{
            if(res.code==200){
                this.film = res.result.data.film
            }
        })
    },
    methods:{
        changeHeight(){
            this.show = !this.show
            if(this.show){

                this.$refs.synopsis.style.height = '210px'
            }else{
                this.$refs.synopsis.style.height = '34px'
            }
        },
        seeBigImg(l,index){
            ImagePreview({
                images: this.film.photos,
                startPosition: index,
            });
        },
        gotpbuy(){
            this.$router.push({name:"film-cinema",params:{filmId:this.film.filmId}})
        }
    }
}
</script>
<style lang='scss'>
.myimg{
    width: 100%;
    height: 210px;
    overflow: hidden;
    img{
        width: 100%;
        margin-top: -150px;
    }
}
.buyticket{
    display: flex;
    align-items: center;
    // text-align: center;
    justify-content: center;
    width: 100%;
    height: 49px;
    background-color: #ff5f16;
    color: #fff;
    position: fixed;
    bottom: 0;
}
.film-detail {
    padding: 15px;
    padding-top: 12px;
    background-color: #fff;
    .col {
      display: flex;
      justify-content: space-between;
      .film-name {
        .name {
          color: #191a1b;
          font-size: 18px;
          height: 24px;
          line-height: 24px;
          margin-right: 7px;
        }
        .item {
          font-size: 9px;
          color: #fff;
          background-color: #d2d6dc;
          height: 14px;
          line-height: 14px;
          padding: 0 2px;
          border-radius: 2px;
          display: inline-block;
        }
      }
      .film-grade {
        text-align: right;
        color: #ffb232;
        .grade {
          font-size: 18px;
          font-style: italic;
        }
        .grade-text {
          font-size: 10px;
        }
      }
    }
    .film-category {
      font-size: 13px;
      color: #797d82;
      margin-top: 4px;
    }
    .film-premiere-time {
      font-size: 13px;
      color: #797d82;
      margin-top: 4px;
    }
    .film-nation-runtime {
      font-size: 13px;
      color: #797d82;
      margin-top: 4px;
    }
    .film-synopsis {
      margin-top: 12px;
      height: 33px;
      overflow: hidden;
      font-size: 13px;
      color: #797d82;
      transition: height 0.5s ease;
    }
    .toggle {
      width: 20px;
      height: 16px;
      margin: 0 auto;
    }
  }
  .actor {
    margin-top: 10px;
    background-color: #fff;
    .actor-title {
      width: 100%;
      padding: 15px;
      font-size: 16px;
      text-align: left;
      color: #191a1b;
    }
    .actor-list {
      width: 100%;
      overflow: hidden;
      padding: 15px;
      ul {
        overflow-x: auto;
        display: flex;
        // margin-right: 10px;
        li {
          width: 85px;
          min-width: 85px;
          list-style: none;
          margin-right: 10px;
          .actor-img{
              width: 85px;
          img {
            width: 100%;
            object-fit:cover;
            // height: 85px;
          }
          }
          .actor-name {
            padding-top: 10px;
            font-size: 12px;
            color: #191a1b;
            width: 85px;
            text-align: center;
            text-overflow: ellipsis;
            white-space: nowrap;
            overflow: hidden;
          }
          .actor-role {
            text-align: center;
            font-size: 10px;
            color: #797d82;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 2;
            overflow: hidden;
          }
        }
      }
    }
  }
  .photo{
      width:100%;
      margin-top:10px;
      background: #fff;
      padding-bottom:60px;
      .photo-top{
          display: flex;
           width:100%;
           padding:0 10px;
           height:40px;
           align-items: center;
           justify-content: space-between;
      }
      .photo-img-box{
          padding: 0 15px;
      .photo-imgs{
          width:100%;
          display: flex;
          overflow-x:auto;
        // padding: 0 20px;
          img{
              height:95px;
              width:150px;
              margin-right:10px;
              flex-shrink: 0; 
          }
      }
      }
  }
</style>